<template>
  <div id="app">
    <el-menu router :default-active="this.$router.path" class="el-menu-demo" mode="horizontal" style="text-align: left">
      <el-menu-item index="/seeker/queryCompany">找企业</el-menu-item>
      <el-menu-item index="/seeker/jobInformation">找工作</el-menu-item>
      <el-menu-item index="/seeker/delivery">岗位投递情况</el-menu-item>
      <el-menu-item index="/seeker/remark">岗位评论情况</el-menu-item>
      <el-submenu index="" style="position: absolute;right: 50px">
        <template slot="title">{{ seeker.seekerName }}</template>
        <el-menu-item index="/seeker/baseInformation"
                      :route="{ path:'/seeker/baseInformation', query: {id: this.user.objectId}}">基本信息
        </el-menu-item>
        <el-menu-item index="/seeker/auditInformation"
                      :route="{ path:'/seeker/auditInformation', query: {id: this.user.objectId}}">认证信息
        </el-menu-item>
        <el-menu-item index="/seeker/resumeInformation"
                      :route="{ path:'/seeker/resumeInformation', query: {id: this.user.objectId}}">简历信息
        </el-menu-item>
        <el-menu-item index="/seeker/updatePassword">更新密码
        </el-menu-item>
        <el-menu-item @click="logout()">退出登录</el-menu-item>
      </el-submenu>
      <div style="text-align: right">
        <el-avatar :size="45">
          <el-upload
              class="avatar-uploader"
              :show-file-list="false"
              action=""
              accept="image/*"
              :http-request="postHeadImage"
              :before-upload="beforeAvatarUpload">
            <el-image v-if="image" :src="image"></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-avatar>
      </div>
    </el-menu>
  </div>
</template>

<script>
import {getSeekerDetail, getImage, postImage} from "@/api";
import jwtUtil from "jwt-decode";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "seekerHeader",
  data() {
    return {
      image: '',
      user: {
        userId: '',
        objectId: '',
        userType: ''
      },
      seeker: {
        id: '',
        seekerName: '',
        sex: '',
        degree: '',
        phone: '',
        email: '',
        address: '',
        identityCard: '',
        auditStatus: '',
        createdTime: '',
        del: ''
      },
    };
  },
  methods: {
    async init() {
      this.user = jwtUtil(window.localStorage.getItem('Token'))
      await getSeekerDetail(this.user.objectId).then(res => {
        this.seeker = res.data
      })
      getImage({
            objectId: this.user.objectId,
            userType: this.user.userType,
            fileName: this.seeker.image,
            fileType: 1
          }
      ).then(res => {
        this.image = window.URL.createObjectURL(res.data);
      })
    },
    logout() {
      window.localStorage.removeItem('Token')
      this.$router.replace('/')
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    postHeadImage(params) {
      const formData = new FormData();
      const file = params.file;
      formData.append("file", file);
      formData.append('objectId', this.user.objectId)
      formData.append('userType', this.user.userType)
      formData.append('fileType', 1)
      postImage(formData).then(res => {
        this.$message.success('上传成功！！！')
        this.init()
        return res
      })
    }
  }, created() {
    if (window.localStorage.getItem('Token') == null) {
      this.$router.replace('/')
    }
    this.init()
  }

}
</script>
